<template>
  <basic-panel>
    <template #header>
      <span class='main-title'>找回密码</span>
    </template>

    <template>
      <form class="input-form">
        <!-- 邮箱 -->
        <good-input label="邮箱验证码" label-id="captcha">
          <input type="text" name="captcha" id="captcha"
                 v-model.trim="captcha">
        </good-input>
        <good-input label="新密码" label-id="email">
          <input type="password" name="newpwd" id="newpwd"
                 v-model.trim="newpwd" @input="inputNewpwd">
          <template #hint>
            <p v-show="newpwd">{{newpwdTips}}</p>
          </template>
        </good-input>
        <good-input label="确认新密码" label-id="email">
          <input type="password" name="confirm" v-model.trim="confirm" id="confirm" @input="inputConfirm">
          <template #hint>
            <p v-show="confirm">{{confirmTips}}</p>
          </template>
        </good-input>
        <div class="submit-box">
          <button class="submit" @click.prevent="submit">提 交</button>
          <span><a @click="$router.push('/login')">登 陆</a>  ·  <a @click="$router.push('/register')">注 册</a></span>
        </div>
      </form>
    </template>
  </basic-panel>
</template>
<script>
import BasicPanel from '@components/common/panel/BasicPanel'
import Register from '@network/register'
import GoodInput from '@components/common/GoodInput'
export default {
  name: 'emailPwd',
  data() {
    return {
      captcha: '',
      captchaTips: '验证码错误！',
      newpwd: '',
      confirm: '',
      isConfirmAvailable: false,
      newpwdTips: null,
      confirmTips: null,
      email:"",
    }
  },
  components: {
    BasicPanel,
    GoodInput,
  },
  created() {
    this.email = this.$route.query.email
    // this.searchStr = this.$route.query.email
    // this.getTopics(this.searchStr)
  },
  methods: {
    // 验证密码
    inputNewpwd() {
      if(!this.newpwd) {
        this.isPasswordAvailable = false
      }
      else if(this.newpwd.length < 6 || this.newpwd.length > 12) {
        this.isPasswordAvailable = false
        this.newpwdTips = '密码长度应为6-12字符'
      }
      else if(/\s/.test(this.newpwd)) {
        this.isPasswordAvailable = false
        this.newpwdTips = '密码不应包含空格'
      }
      else {
        this.isPasswordAvailable = true
        this.newpwdTips = '√'
      }
      this.inputConfirm()
    },
    // 验证再次输入的密码
    inputConfirm() {
      if(!this.confirm) {
        this.isConfirmAvailable = false
      }
      else if(this.newpwd === this.confirm) {
        this.isConfirmAvailable = true
        this.confirmTips = '√'
      }
      else if(this.confirm !== this.newpwd) {
        this.isConfirmAvailable = false
        this.confirmTips = '两次输入密码不一致'
      }
    },
    // 提交注册数据
    submit() {
      // 验证非空
      if(!this.newpwd || !this.confirm || !this.captcha || !this.email) {
        alert('请输入完整注册信息')
      }
      else if(this.isConfirmAvailable && this.isPasswordAvailable) {
        // 发送验证邮件
        Register.resetPwd(this.captcha,this.newpwd,this.email)
            .then(res => {
              if(res.data.code === 0) {
                this.isCaptchaWrong = false
                alert(res.data.msg)
                setInterval(this.$router.replace('/'),800);
              }
              else {
                this.isCaptchaWrong = true
                alert(res.data.msg)
              }
            })
      }
      else {
        alert('注册信息有误，请检查')
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.main-title{
  @include main-title
}
.input-form{
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.submit-box{
  .submit{
    @include basic-button;
    margin-left: 65px;
  }
  span{
    margin-left: 10px;
    a {

      color: #1E88E5;
      text-decoration: none;
      cursor: pointer;
    }
  }
}
// 验证码图片居中
.captcha {
  margin-left: 60px;
  margin-bottom: 20px;
}
</style>
